/**
 * 安全评估
 */
import * as React from "react";
import { Card, Col, Rate, Row, Spin } from "antd";
import * as echarts from "echarts";
import ReactEcharts from "echarts-for-react";
import icon_anquanpinggu from "../../../../../../assets/img/dianqianquan/icon_anquanpinggu.png";
import "./index.less";
import DancingNum from "../../../../../../compontents/DancingNum";
import RouteLink from "../../../../../../compontents/RouteLink";

export interface SafetyAssessmentProps {
  dataSouce: HealthyData | null;
}
interface HealthyData {
  days: number;
  offLine: number;
  onLine: number;
  total: number;
  scoreEle: fenD;
  scoreLoseEle: fenD;
  scorePower: fenD;
  scoreTemperature: fenD;
}
export interface SafetyAssessmentState {
  loading: boolean;
  // scoreEle: fenD;
  // scoreLoseEle: fenD;
  // scorePower: fenD;
  // scoreTemperature: fenD;
}
interface fenD {
  total: number;
  totalScore: number;
  rote: number;
}
class SafetyAssessment extends React.Component<
  SafetyAssessmentProps,
  SafetyAssessmentState
> {
  state = {
    loading: false,
  };
  scoreEle = { total: 30, totalScore: 0, rote: 0 };
  scoreLoseEle = { total: 30, totalScore: 0, rote: 0 };
  scorePower = { total: 30, totalScore: 0, rote: 0 };
  scoreTemperature = { total: 10, totalScore: 0, rote: 0 };
  total = 0;
  pingja = "暂无";
  private option = {};
  shouldComponentUpdate(
    newProps: SafetyAssessmentProps,
    newState: SafetyAssessmentState
  ) {
    if (newProps.dataSouce !== this.props.dataSouce) {
      if (newProps.dataSouce) {
        let {
          scoreEle,
          scoreLoseEle,
          scorePower,
          scoreTemperature,
        } = newProps.dataSouce;
        scoreEle.rote = this.getRate(scoreEle.totalScore, scoreEle.total);
        scoreLoseEle.rote = this.getRate(
          scoreLoseEle.totalScore,
          scoreLoseEle.total
        );
        scorePower.rote = this.getRate(scorePower.totalScore, scorePower.total);
        scoreTemperature.rote = this.getRate(
          scoreTemperature.totalScore,
          scoreTemperature.total
        );
        this.scoreEle = scoreEle;
        this.scoreLoseEle = scoreLoseEle;
        this.scorePower = scorePower;
        this.scoreTemperature = scoreTemperature;
        this.forceUpdate();
        this.getPinjia();
        this.getOption();
      }
    }
    return true;
  }
  getRate(fz: number, fm: number) {
    return (fz / fm) * 5;
  }
  getPinjia() {
    let { scoreEle, scoreLoseEle, scorePower, scoreTemperature } = this;
    let total =
      scoreEle.totalScore +
      scoreLoseEle.totalScore +
      scorePower.totalScore +
      scoreTemperature.totalScore;
    let pingjia = "";
    if (total < 60) {
      pingjia = "极差";
    } else if (total < 70) {
      pingjia = "合格";
    } else if (total < 90) {
      pingjia = "良好";
    } else if (total < 100) {
      pingjia = "优秀";
    }
    this.pingja = pingjia;
    this.total = total;
    this.forceUpdate();
  }
  render() {
    let { scoreEle, scoreLoseEle, scorePower, scoreTemperature } = this;

    return (
      <div className="SafetyAssessment">
        <Card
          title={
            <>
              <img src={icon_anquanpinggu} alt="安全评估" />
              安全评估
            </>
          }
          extra={
            //RouteLink
            <RouteLink url="#/Portal/ScoringDetails">详情</RouteLink>
          }
        >
          <Row>
            <Col span={12}>
              <div className="pingfen">
                <div className="h2">
                  <DancingNum number={this.total} />分
                </div>
                <div className="pingjia">{this.pingja}</div>
                <p>
                  漏电检测
                  <b>
                    <DancingNum number={scoreLoseEle.totalScore} />
                  </b>
                  分
                  <Rate
                    disabled
                    value={scoreLoseEle.rote}
                    style={{ color: "#407DF9" }}
                  />
                </p>
                <p>
                  温度检测
                  <b>
                    <DancingNum number={scoreTemperature.totalScore} />
                  </b>
                  分
                  <Rate
                    disabled
                    value={scoreTemperature.rote}
                    style={{ color: "#407DF9" }}
                  />
                </p>
                <p>
                  电源检测
                  <b>
                    <DancingNum number={scorePower.totalScore} />
                  </b>
                  分
                  <Rate
                    disabled
                    value={scorePower.rote}
                    style={{ color: "#407DF9" }}
                  />
                </p>
                <p>
                  供电质量
                  <b>
                    <DancingNum number={scoreEle.totalScore} />
                  </b>
                  分
                  <Rate
                    disabled
                    value={scoreEle.rote}
                    style={{ color: "#407DF9" }}
                  />
                </p>
              </div>
            </Col>
            <Col span={12} style={{ marginRight: -10 }}>
              <Spin spinning={this.state.loading}>
                <ReactEcharts
                  option={this.getOption()}
                  notMerge={true}
                  lazyUpdate={true}
                  style={{ height: 300, width: "100%" }}
                  // theme="dark"
                />
              </Spin>
            </Col>
          </Row>
        </Card>
      </div>
    );
  }
  componentWillMount() {}
  getOption() {
    let { scoreEle, scoreLoseEle, scorePower, scoreTemperature } = this;
    return {
      tooltip: {},

      radar: {
        // shape: 'circle',
        name: {
          textStyle: {
            color: "#707070",
            padding: [-10, -12],
          },
        },
        indicator: [
          { name: "电源", max: scorePower.total },
          { name: "温度", max: scoreTemperature.total },
          { name: "漏电", max: scoreLoseEle.total },
          { name: "供电质量", max: scoreEle.total },
        ],
        // radius: 85, //缩放
        center: ["50%", "50%"], //位置
      },
      series: [
        {
          name: "安全评估",
          type: "radar",
          data: [
            {
              value: [
                scorePower.totalScore,
                scoreTemperature.totalScore,
                scoreLoseEle.totalScore,
                scoreEle.totalScore,
              ],
              name: "安全评估",
              areaStyle: {
                opacity: 0.9,
                color: new echarts.graphic.RadialGradient(0.5, 0.5, 1, [
                  {
                    color: "#B8D3E4",
                    offset: 0,
                  },
                  {
                    color: "#72ACD1",
                    offset: 1,
                  },
                ]),
              },
            },
          ],
        },
      ],
    };
  }
}

export default SafetyAssessment;
